﻿<div>
    @if (Model == null)
    {
        <div class="d-flex h-100 align-items-center justify-content-center">
            No table selected
        </div>
    }
    else
    {
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="center">
                            <label for="name">Name</label>
                        </div>
                    </td>
                    <td>
                        <Input Placeholder="name" @bind-Value="@Model.Name" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="center">
                            <label for="title">Title</label>
                        </div>
                    </td>
                    <td>
                        <Input Placeholder="Title" @bind-Value="@Model.Title" @oninput="OnTitleChanged" />
                    </td>
                </tr>
            @*    <tr>
                    <td>
                        <div class="center">
                            <label for="color">Color</label>
                        </div>
                    </td>
                    <td>
                        <Input Placeholder="Color" @bind-Value="@Model.Color" @oninput="OnColorChanged" />
                    </td>
                </tr>*@
                @if (Model.Kind == AIStudio.Util.DiagramEntity.NodeKinds.Middle)
                {
                    <tr>
                        <td>
                            <div class="center">
                                <label>用户名</label>
                            </div>
                        </td>
                        <td>
                            <Select TItem="AIStudio.Util.Common.SelectOption"
                                TItemValue="string"
                                @bind-Values="@Model.UserIds"
                                AllowClear
                                DataSource="Users"
                                Placeholder="请选择用户"
                                LabelName="@nameof(AIStudio.Util.Common.SelectOption.Text)"
                                ValueName="@nameof(AIStudio.Util.Common.SelectOption.Value)"
                                Mode="multiple">
                            </Select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="center">
                                <label>角色名</label>
                            </div>
                        </td>
                        <td>
                            <Select TItem="AIStudio.Util.Common.SelectOption"
                                TItemValue="string"
                                @bind-Values="@Model.RoleIds"
                                AllowClear
                                DataSource="Roles"
                                Placeholder="请选择角色"
                                LabelName="@nameof(AIStudio.Util.Common.SelectOption.Text)"
                                ValueName="@nameof(AIStudio.Util.Common.SelectOption.Value)"
                                Mode="multiple">
                            </Select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="center">
                                <label>or/and</label>
                            </div>
                        </td>
                        <td>
                            <SimpleSelect @bind-Value="@Model.ActType">
                                <SelectOptions>
                                    <SimpleSelectOption Value="or" Label="or"></SimpleSelectOption>
                                    <SimpleSelectOption Value="and" Label="and"></SimpleSelectOption>
                                </SelectOptions>
                            </SimpleSelect>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    }
</div>

<style>
    .center {
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>